<template>
  <!-- 数值统计 -->
  <div class="number-static">
    <div class="number-item">
      <div>
        <p class="number-type">累计学习主题</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <Notebook />
      </el-icon>
    </div>
    <div class="number-item">
      <div>
        <p class="number-type">累计学习人/次</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <Avatar />
      </el-icon>
    </div>
    <div class="number-item">
      <div>
        <p class="number-type">覆盖学习单位数</p>
        <p class="number-count">1410</p>
      </div>
      <el-icon>
        <UserFilled />
      </el-icon>
    </div>
  </div>

  <!-- 年度统计 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header chart-toobar">
        <span>年度学习统计</span>
        <div class="chart-button">
          <el-icon title="切换到图表模式" @click="isYearChartShow = true">
            <Histogram />
          </el-icon>

          <el-icon title="切换到表格模式" @click="isYearChartShow = false">
            <Grid />
          </el-icon>

          <el-icon title="导出">
            <Download />
          </el-icon>
        </div>
      </div>
    </template>

    <div class="year-chart" id="yearChart" style="height: 400px;" v-show="isYearChartShow">
    </div>

    <div class="year-table" v-show="!isYearChartShow">
      表格
    </div>
  </el-card>

  <!-- 主题和各区统计 -->
  <div class="theme-area">
    <el-card class="box-card theme-card">
      <template #header>
        <div class="card-header">
          <span>主题统计</span>
        </div>
      </template>

      <div class="year-chart" id="themeChart" style="height: 400px;">
      </div>
    </el-card>

    <el-card class="box-card area-card">
      <template #header>
        <div class="card-header">
          <span>各区学习统计</span>
        </div>
      </template>

      <div class="year-chart" id="areaChart" style="height: 400px;">
      </div>
    </el-card>
  </div>
</template>

<script>
export default { name: 'backendPublicizeStatic' }
</script>

<script setup>
import { Notebook, Avatar, UserFilled, Histogram, Grid, Download } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  getYearChart()
  getThemeChart()
  getAreaChart()
})

/* 年度统计图表显示隐藏 */
const isYearChartShow = ref(true)

/* 年度统计表格列字段 */
const yearTableColumns = reactive([])

/* 年度统计图表 */
const getYearChart = () => {
  let myChart = echarts.init(document.getElementById('yearChart'));
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

/* 主题统计图表 */
const getThemeChart = () => {
  let myChart = echarts.init(document.getElementById('themeChart'));
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

/* 各区统计图表 */
const getAreaChart = () => {
  let myChart = echarts.init(document.getElementById('areaChart'));
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
}

</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";


/* 数值统计 */
.number-static{
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  .number-item{
    border-radius: 4px;
    height: 100px;
    padding: 12px;
    box-sizing: border-box;
    width: 32%;
    background-color: #ffffff;
    position: relative;
    display: flex;
    justify-content: space-between;
    .number-count{
      margin-top: 12px;
      font-size: 28px;
      font-weight: bold;
      color: var(--theme-color);
    }
    .number-percentage{
      font-size: 12px;
    }
    :deep(.el-icon){
      font-size: 36px;
      margin: 12px 8px 0 0;
      color: #9AA0AC;
    }
  }
}

.box-card {
  height: auto;
  margin-bottom: 16px;
}
.chart-toobar {
  display: flex;
  justify-content: space-between;
  :deep(.el-icon){
    margin-left: 12px;
    font-size: 18px;
  }
}

/* 主题+年度 */
.theme-area {
  display: flex;
  justify-content: space-between;
  .theme-card{
    width: 39%;
  }
  .area-card{
    width: 60%;
  }
}
</style>